<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客管理系统</title>
    <!-- 鼠标点击文字显示效果css代码-->
    <link rel="stylesheet" href="../public_static/css/mouse_click_effect.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* 导航菜单样式 */
        .management-nav {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .nav-list {
            display: flex;
            list-style: none;
        }
        
        .nav-item {
            padding: 15px 25px;
            cursor: pointer;
            transition: background-color 0.2s;
            border-bottom: 3px solid transparent;
        }
        
        .nav-item.active {
            background-color: #f0f7ff;
            border-bottom-color: #4285f4;
            color: #4285f4;
            font-weight: 500;
        }
        
        .nav-item:hover:not(.active) {
            background-color: #f9f9f9;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }
        
        h1 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .form-section {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .form-title {
            color: #444;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: bolder;
        }
        
        input, select, textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #66afe9;
            box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.25);
        }
        
        textarea {
            min-height: 200px;
            resize: vertical;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: background-color 0.2s;
        }
        
        .btn-primary {
            background-color: #4285f4;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #3367d6;
        }
        
        .articles-section {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .articles-title {
            color: #444;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .articles-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .articles-table th,
        .articles-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        .articles-table td {
            max-width: 200px;
        }
        
        .articles-table th {
            background-color: #f9f9f9;
            color: #555;
            font-weight: 600;
        }
        
        .articles-table tr:hover {
            background-color: #f9f9f9;
        }
        
        .article-content {
            max-width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .action-btn {
            padding: 6px 12px;
            margin-right: 5px;
            font-size: 13px;
        }
        
        .edit-btn {
            background-color: #fbbc05;
            color: white;
        }
        
        .edit-btn:hover {
            background-color: #f8b500;
        }
        
        .delete-btn {
            background-color: #ea4335;
            color: white;
        }
        
        .delete-btn:hover {
            background-color: #d93025;
        }
        
        .form-actions {
            text-align: right;
        }

        /* 内容区域样式 */
        .content-section {
            display: none;
        }
        
        .content-section.active {
            display: block;
        }

        /* 编辑和预览区域布局 */
        .editor-container {
            display: flex;
            gap: 20px;
        }
        
        .editor-area {
            flex: 1;
        }
        
        .preview-area {
            flex: 1;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            border: 1px solid #eee;
            max-height: 700px;
            overflow-y: auto;
        }
        
        .preview-title {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
            color: #555;
        }
        
        .preview-content h1,
        .preview-content h2,
        .preview-content h3 {
            margin: 15px 0 10px;
            color: #333;
        }
        
        .preview-content p {
            margin-bottom: 10px;
            line-height: 1.6;
        }
        
        .preview-content img {
            max-width: 100%;
            height: auto;
            margin: 10px 0;
        }
        
        .preview-content ul,
        .preview-content ol {
            margin: 10px 0 10px 20px;
        }
        
        .preview-content li {
            margin-bottom: 5px;
        }

        /* 分页控件样式 */
        .pagination {
            margin-top: 15px;
            text-align: right;
        }

        .pagination-btn {
            padding: 6px 12px;
            margin: 0 3px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
            cursor: pointer;
        }

        .pagination-btn:disabled {
            background-color: #f5f5f5;
            cursor: not-allowed;
            color: #999;
        }

        .pagination-btn.active {
            background-color: #4285f4;
            color: white;
            border-color: #4285f4;
        }

        .pagination-info {
            margin: 0 10px;
            color: #666;
        }

        /* 分类表格容器样式 */
        .category-container {
            margin-bottom: 40px;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }

        .category-title {
            margin-bottom: 15px;
            color: #444;
            font-size: 18px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>博客空间管理系统</h1>
            <p>在这里管理您的博客空间</p>
        </header>

        <!-- 管理导航菜单 -->
        <nav class="management-nav">
            <ul class="nav-list">
                <li class="nav-item active" data-target="article-management">文章管理</li>
                <li class="nav-item" data-target="category-management">分类管理</li>
                <li class="nav-item" data-target="timeline-management">日志管理</li>
                <li class="nav-item" data-target="comment-management">评论管理</li>
                <li class="nav-item" data-target="system-management">系统管理</li>
            </ul>
        </nav>
        
        <!-- 文章管理内容区域 -->
        <div id="article-management" class="content-section active">
            <!-- 发布新文章表单 -->
            <section class="form-section">
                <h2 class="form-title">发布新文章</h2>
                <div class="editor-container">
                    <div class="editor-area">
                        <form id="articleForm">
                            <div class="form-group">
                                <label for="category">文章类别</label>
                                <select id="category" required>
                                    <option value="">请选择类别</option>
                                    <option value="技术">技术</option>
                                    <option value="生活">生活</option>
                                    <option value="旅行">旅行</option>
                                    <option value="美食">美食</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="author">作者</label>
                                <input type="text" id="author" required placeholder="请输入作者名称">
                            </div>
                            
                            <div class="form-group">
                                <label for="authorAvatarUrl">作者头像URL（可以输入图像网址）</label>
                                <input type="text" id="authorAvatarUrl" placeholder="请输入头像图片URL，没有请空着">
                            </div>
                            
                            <div class="form-group">
                                <label for="coverUrl">封面URL（可以输入图像网址）</label>
                                <input type="text" id="coverUrl" placeholder="请输入封面图片URL，没有请空着">
                            </div>
                            
                            <div class="form-group">
                                <label for="title">文章标题</label>
                                <input type="text" id="title" required placeholder="请输入文章标题" oninput="updatePreview()">
                            </div>
                            
                            <div class="form-group">
                                <label for="content">文章内容（支持HTML）</label>
                                <textarea id="content" required placeholder="请输入文章内容（支持HTML）" oninput="updatePreview()"></textarea>
                            </div>
                            
                            <div class="form-group">
                                <label for="readTime">建议阅读时间（分钟）</label>
                                <input type="number" id="readTime" min="1" required placeholder="请输入建议阅读时间">
                            </div>
                            
                            <div class="form-actions">
                                <button type="submit" class="btn btn-primary" id="submitButton">发布文章</button>
                                <button type="button" class="btn" id="cancelArticleButton" style="margin-left:10px;" onclick="resetArticleForm()">取消</button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 实时预览区域 -->
                    <div class="preview-area">
                        <h3 class="preview-title">实时预览</h3>
                        <div class="preview-content" id="previewContent">
                            <p>请输入文章内容查看预览效果...</p>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 文章展示区域 -->
            <section class="articles-section">
                <h2 class="articles-title">文章列表</h2>
                <table class="articles-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>类别</th>
                            <th>标题</th>
                            <th>作者</th>
                            <th>创建时间</th>
                            <th>建议阅读时间</th>
                            <th>浏览量</th>
                            <th>内容预览</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="articlesList">
                        <!-- 文章数据将通过JavaScript动态加载 -->
                        <tr>
                            <td colspan="9" style="text-align: center; color: #777;">暂无文章数据</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </div>

        <!-- 分类管理板块 -->
        <div id="category-management" class="content-section">
            <section class="form-section">
                <h2 class="form-title">分类管理</h2>
                
                <!-- 分类列表容器 -->
                <div id="categoriesContainer" style="margin-top: 20px;">
                    <!-- 分类表格将通过JavaScript动态加载 -->
                </div>
            </section>
        </div>
        
        <!-- 日志管理内容区域 -->
        <div id="timeline-management" class="content-section">
            <section class="form-section">
                <h2 class="form-title">添加/编辑开发者日志</h2>
                <form id="timelineForm">
                    <input type="hidden" id="timelineId">
                    
                    <div class="form-group">
                        <label for="timelineDate">日期</label>
                        <input type="date" id="timelineDate" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="timelineType">类型</label>
                        <select id="timelineType" required>
                            <option value="bug">修复问题 (bug)</option>
                            <option value="feature">新增功能 (feature)</option>
                            <option value="optimization">性能优化 (optimization)</option>
                            <option value="release">版本发布 (release)</option>
                            <option value="deprecation">废弃功能 (deprecation)</option>
                            <option value="test">测试相关 (test)</option>
                            <option value="documentation">文档更新 (documentation)</option>
                            <option value="refactor">代码重构 (refactor)</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="timelineTitle">标题</label>
                        <input type="text" id="timelineTitle" required placeholder="日志标题">
                    </div>
                    
                    <div class="form-group">
                        <label for="timelineContent">内容</label>
                        <textarea id="timelineContent" rows="5" placeholder="日志详细内容"></textarea>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary" id="saveTimelineButton">保存日志</button>
                        <button type="button" class="btn" id="cancelTimelineButton" style="margin-left:10px;" onclick="resetTimelineForm()">取消</button>
                    </div>
                </form>
            </section>
            
            <section class="articles-section">
                <h2 class="articles-title">日志列表</h2>
                <table class="articles-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>日期</th>
                            <th>类型</th>
                            <th>标题</th>
                            <th>内容</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="timelineList">
                        <tr>
                            <td colspan="7" style="text-align: center; color: #777;">暂无日志数据</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </div>

        <!-- 评论管理内容区域 -->
        <div id="comment-management" class="content-section">
            <section class="form-section">
                <h2 class="form-title">评论管理</h2>
                <p>评论管理功能即将上线，敬请期待...</p>
            </section>
        </div>
        
        <!-- 系统管理内容区域 -->
        <div id="system-management" class="content-section">
            <section class="form-section">
                <h2 class="form-title">系统管理</h2>
                <p>系统管理功能即将上线，敬请期待...</p>
            </section>
        </div>
    </div>

    <!-- 鼠标点击文字显示效果js代码-->
    <script src="../public_static/js/mouse_click_effect.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 导航菜单切换功能
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有活跃状态
                    navItems.forEach(nav => nav.classList.remove('active'));
                    document.querySelectorAll('.content-section').forEach(section => {
                        section.classList.remove('active');
                    });
                    
                    // 设置当前活跃状态
                    item.classList.add('active');
                    const targetId = item.getAttribute('data-target');
                    document.getElementById(targetId).classList.add('active');

                    // 当切换到分类管理时加载分类文章
                    if (targetId === 'category-management') {
                        loadCategoryArticles();
                    }
                });
            });

            // 添加隐藏字段存储当前编辑的文章ID（新增时为空）
            const editArticleIdInput = document.createElement('input');
            editArticleIdInput.type = 'hidden';
            editArticleIdInput.id = 'editArticleId';
            document.getElementById('articleForm').appendChild(editArticleIdInput);

            loadArticles();
            
            // 表单提交事件（同时处理新增和编辑）
            document.getElementById('articleForm').addEventListener('submit', async (e) => {
                e.preventDefault();
                const editArticleId = document.getElementById('editArticleId').value;
                const articleData = {
                    category: document.getElementById('category').value,
                    author: document.getElementById('author').value,
                    author_avatar_url: document.getElementById('authorAvatarUrl').value,
                    cover_url: document.getElementById('coverUrl').value,
                    title: document.getElementById('title').value,
                    content: document.getElementById('content').value,
                    read_time: document.getElementById('readTime').value || null
                };

                try {
                    if (editArticleId) {
                        // 编辑文章
                        await window.electronAPI.updateArticle(editArticleId, articleData);
                        alert('文章更新成功！');
                    } else {
                        // 新增文章
                        await window.electronAPI.addArticle(articleData);
                        alert('文章发布成功！');
                    }
                    // 重置表单并重新加载列表
                    e.target.reset();
                    document.getElementById('editArticleId').value = '';
                    // 重置按钮文本为"发布文章"
                    document.getElementById('submitButton').textContent = '发布文章';
                    // 更新预览
                    updatePreview();
                    loadArticles();
                } catch (error) {
                    console.error('操作失败:', error);
                    alert('操作失败：' + error.message);
                }
            });

                
            // 加载日志数据
            loadTimelineEntries();
            
            // 日志表单提交事件
            document.getElementById('timelineForm').addEventListener('submit', async (e) => {
                e.preventDefault();
                const timelineId = document.getElementById('timelineId').value;
                const entryData = {
                    date: document.getElementById('timelineDate').value,
                    type: document.getElementById('timelineType').value,
                    title: document.getElementById('timelineTitle').value,
                    content: document.getElementById('timelineContent').value
                };

                try {
                    if (timelineId) {
                        // 更新日志
                        await window.electronAPI.updateTimelineEntry(timelineId, entryData);
                        alert('日志更新成功！');
                    } else {
                        // 新增日志
                        await window.electronAPI.addTimelineEntry(entryData);
                        alert('日志添加成功！');
                    }
                    // 重置表单并重新加载列表
                    resetTimelineForm();
                    loadTimelineEntries();
                } catch (error) {
                    console.error('操作失败:', error);
                    alert('操作失败：' + error.message);
                }
            });
        });

        // 实时更新预览
        function updatePreview() {
            const title = document.getElementById('title').value;
            const content = document.getElementById('content').value;
            const coverUrl = document.getElementById('coverUrl').value;
            const previewContent = document.getElementById('previewContent');
            
            // 构建预览HTML
            let previewHtml = '';
            
            // 添加标题
            if (title) {
                previewHtml += `<h1>${title}</h1>`;
            }
            
            // 添加封面图
            if (coverUrl) {
                previewHtml += `<img src="${coverUrl}" alt="封面图">`;
            }
            
            // 添加内容
            previewHtml += content || '<p>请输入文章内容...</p>';
            
            // 更新预览区域
            previewContent.innerHTML = previewHtml;
        }

        // 加载文章列表
        async function loadArticles() {
            try {
                const result = await window.electronAPI.getArticles({ limit: 100 });
                const articlesList = document.getElementById('articlesList');
                articlesList.innerHTML = '';
                
                if (result.articles.length === 0) {
                    articlesList.innerHTML = '<tr><td colspan="9" style="text-align: center; color: #777;">暂无文章数据</td></tr>';
                    return;
                }
                
                // 按创建时间降序排序
                const sortedArticles = result.articles.sort((a, b) => 
                    new Date(b.create_time) - new Date(a.create_time)
                );
                
                sortedArticles.forEach(article => {
                    const row = document.createElement('tr');
                    const plainContent = article.content.replace(/<[^>]*>?/gm, '');
                    const previewContent = plainContent.length > 100 
                        ? plainContent.substring(0, 100) + '...' 
                        : plainContent;
                    
                    row.innerHTML = `
                        <td>${article.id}</td>
                        <td>${article.category}</td>
                        <td>${article.title}</td>
                        <td>${article.author}</td>
                        <td>${new Date(article.create_time).toLocaleString()}</td>
                        <td>${article.read_time || 'N/A'} 分钟</td>
                        <td>${article.views}</td>
                        <td class="article-content">${previewContent}</td>
                        <td>
                            <button class="btn action-btn edit-btn" onclick="editArticle('${article.article_id}')">编辑</button>
                            <button class="btn action-btn delete-btn" onclick="deleteArticle('${article.article_id}')">删除</button>
                        </td>
                    `;
                    articlesList.appendChild(row);
                });
            } catch (error) {
                console.error('获取文章列表失败:', error);
                document.getElementById('articlesList').innerHTML = 
                    '<tr><td colspan="9" style="text-align: center; color: #d93025;">加载文章失败，请重试</td></tr>';
            }
        }

        // 编辑文章：加载文章数据到表单
        async function editArticle(articleId) {
            try {
                const article = await window.electronAPI.getArticleById(articleId);
                if (!article) {
                    alert('文章不存在或已被删除');
                    return;
                }
                
                // 填充表单数据
                document.getElementById('category').value = article.category;
                document.getElementById('author').value = article.author;
                document.getElementById('authorAvatarUrl').value = article.author_avatar_url || '';
                document.getElementById('coverUrl').value = article.cover_url || '';
                document.getElementById('title').value = article.title;
                document.getElementById('content').value = article.content;
                document.getElementById('readTime').value = article.read_time || '';
                document.getElementById('editArticleId').value = articleId;
                
                // 确保切换到文章管理标签
                document.querySelector('.nav-item[data-target="article-management"]').click();

                // 将按钮文本改为"编辑文章"
                document.getElementById('submitButton').textContent = '编辑文章';
                
                // 滚动到表单顶部
                document.querySelector('.form-section').scrollIntoView({ behavior: 'smooth' });
            } catch (error) {
                console.error('加载文章失败:', error);
                alert('加载文章失败：' + error.message);
            }
        }

        // 删除文章：调用API并刷新列表
        async function deleteArticle(articleId) {
            if (confirm(`确定要删除ID为 ${articleId} 的文章吗？此操作不可恢复！`)) {
                try {
                    await window.electronAPI.deleteArticle(articleId);
                    alert('文章删除成功！');
                    loadArticles(); // 重新加载列表
                    loadCategoryArticles(); // 加载所有分类的文章并按分类显示
                } catch (error) {
                    console.error('删除文章失败:', error);
                    alert('删除失败：' + error.message);
                }
            }
        }
    
        // 加载所有分类的文章并按分类显示
        async function loadCategoryArticles() {
            try {
                // 获取所有分类
                const categories = await window.electronAPI.getCategoryStats();
                const container = document.getElementById('categoriesContainer');
                container.innerHTML = '';
                
                if (categories.length === 0) {
                    container.innerHTML = '<p style="text-align: center; color: #777;">暂无分类数据</p>';
                    return;
                }
                
                // 为每个分类创建表格
                for (const category of categories) {
                    const categoryId = `category-${category.category.replace(/\s+/g, '-')}`;
                    const categoryContainer = document.createElement('div');
                    categoryContainer.className = 'category-container';
                    categoryContainer.innerHTML = `
                        <h3 class="category-title">${category.category} (共 ${category.count} 篇文章)</h3>
                        <table class="articles-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>文章ID</th>
                                    <th>标题</th>
                                    <th>作者</th>
                                    <th>创建时间</th>
                                    <th>建议阅读时间</th>
                                    <th>浏览量</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="${categoryId}-table-body">
                                <tr><td colspan="8" style="text-align: center;">加载中...</td></tr>
                            </tbody>
                        </table>
                        <div class="pagination" id="${categoryId}-pagination">
                            <!-- 分页控件将动态生成 -->
                        </div>
                    `;
                    
                    container.appendChild(categoryContainer);
                    
                    // 为当前分类加载第一页文章
                    loadCategoryPage(category.category, 1, categoryId);
                }
            } catch (error) {
                console.error('加载分类文章失败:', error);
                document.getElementById('categoriesContainer').innerHTML = 
                    '<p style="text-align: center; color: #d93025;">加载分类失败，请重试</p>';
            }
        }

        // 加载特定分类的特定页文章
        async function loadCategoryPage(category, page, categoryId) {
            try {
                const limit = 5; // 每页显示5篇文章
                const result = await window.electronAPI.getArticles({
                    category,
                    page,
                    limit
                });
                
                const tableBody = document.getElementById(`${categoryId}-table-body`);
                const paginationContainer = document.getElementById(`${categoryId}-pagination`);
                
                // 清空表格
                tableBody.innerHTML = '';
                
                if (result.articles.length === 0) {
                    tableBody.innerHTML = '<tr><td colspan="8" style="text-align: center; color: #777;">该分类暂无文章</td></tr>';
                    paginationContainer.innerHTML = '';
                    return;
                }
                
                // 填充表格数据
                result.articles.forEach(article => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${article.id}</td>
                        <td>${article.article_id}</td>
                        <td>${article.title}</td>
                        <td>${article.author}</td>
                        <td>${new Date(article.create_time).toLocaleString()}</td>
                        <td>${article.read_time || 'N/A'} 分钟</td>
                        <td>${article.views}</td>
                        <td>
                            <button class="btn action-btn edit-btn" onclick="editArticle('${article.article_id}')">编辑</button>
                            <button class="btn action-btn delete-btn" onclick="deleteArticle('${article.article_id}')">删除</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
                
                // 生成分页控件
                generatePagination(paginationContainer, page, result.totalPages, category, categoryId);
            } catch (error) {
                console.error(`加载分类 ${category} 第 ${page} 页失败:`, error);
                tableBody.innerHTML = `<tr><td colspan="8" style="text-align: center; color: #d93025;">加载失败，请重试</td></tr>`;
            }
        }

        // 生成分页控件
        function generatePagination(container, currentPage, totalPages, category, categoryId) {
            let paginationHtml = '';
            
            // 上一页按钮
            paginationHtml += `<button class="pagination-btn" onclick="loadCategoryPage('${category}', ${currentPage - 1}, '${categoryId}')" ${currentPage === 1 ? 'disabled' : ''}>上一页</button>`;
                        
            // 页码信息
            paginationHtml += `<span class="pagination-info">第 ${currentPage} 页 / 共 ${totalPages} 页</span>`;
            
            // 下一页按钮
            paginationHtml += `<button class="pagination-btn" onclick="loadCategoryPage('${category}', ${currentPage + 1}, '${categoryId}')" ${currentPage === totalPages ? 'disabled' : ''}>下一页</button>`;
            
            container.innerHTML = paginationHtml;
        }

        // 重置文章表单
        function resetArticleForm() {
            document.getElementById('articleForm').reset();
            document.getElementById('editArticleId').value = '';
            document.getElementById('submitButton').textContent = '发布文章';
            updatePreview(); // 重置预览区域
        }

        // 加载日志列表
        async function loadTimelineEntries() {
            try {
                let entries = await window.electronAPI.getTimelineEntries();
                // 按日期排序（最新的在前）
                entries = entries.sort((a, b) => new Date(b.date) - new Date(a.date));
                
                const timelineList = document.getElementById('timelineList');
                timelineList.innerHTML = '';
                
                if (entries.length === 0) {
                    timelineList.innerHTML = '<tr><td colspan="7" style="text-align: center; color: #777;">暂无日志数据</td></tr>';
                    return;
                }
                
                entries.forEach(entry => {
                    // 格式化日期显示
                    const date = new Date(entry.date);
                    const formattedDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
                    
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${entry.id}</td>
                        <td>${formattedDate}</td>
                        <td>${entry.type}</td>
                        <td>${entry.title}</td>
                        <td>${entry.content || ''}</td>
                        <td>${new Date(entry.create_time).toLocaleString()}</td>
                        <td>
                            <button class="btn action-btn edit-btn" onclick="editTimelineEntry(${entry.id})">编辑</button>
                            <button class="btn action-btn delete-btn" onclick="deleteTimelineEntry(${entry.id})">删除</button>
                        </td>
                    `;
                    timelineList.appendChild(row);
                });
            } catch (error) {
                console.error('获取日志列表失败:', error);
                document.getElementById('timelineList').innerHTML = 
                    '<tr><td colspan="7" style="text-align: center; color: #d93025;">加载日志失败，请重试</td></tr>';
            }
        }

        // 编辑日志
        async function editTimelineEntry(id) {
            try {
                const entry = await window.electronAPI.getTimelineEntryById(id);
                if (!entry) {
                    alert('日志不存在或已被删除');
                    return;
                }
                
                // 填充表单数据
                document.getElementById('timelineId').value = entry.id;
                document.getElementById('timelineDate').value = entry.date;
                document.getElementById('timelineType').value = entry.type;
                document.getElementById('timelineTitle').value = entry.title;
                document.getElementById('timelineContent').value = entry.content || '';
                
                // 确保切换到日志管理标签
                document.querySelector('.nav-item[data-target="timeline-management"]').click();
                
                // 将按钮文本改为"更新日志"
                document.getElementById('saveTimelineButton').textContent = '更新日志';
                
                // 滚动到表单顶部
                document.querySelector('#timeline-management .form-section').scrollIntoView({ behavior: 'smooth' });
            } catch (error) {
                console.error('加载日志失败:', error);
                alert('加载日志失败：' + error.message);
            }
        }

        // 删除日志
        async function deleteTimelineEntry(id) {
            if (confirm(`确定要删除ID为 ${id} 的日志吗？此操作不可恢复！`)) {
                try {
                    await window.electronAPI.deleteTimelineEntry(id);
                    alert('日志删除成功！');
                    loadTimelineEntries();
                } catch (error) {
                    console.error('删除日志失败:', error);
                    alert('删除失败：' + error.message);
                }
            }
        }

        // 重置日志表单
        function resetTimelineForm() {
            document.getElementById('timelineForm').reset();
            document.getElementById('timelineId').value = '';
            document.getElementById('saveTimelineButton').textContent = '保存日志';
        }



    </script>
</body>
</html>